<template>
  <el-dialog title="添加属性值" append-to-body :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'560px'">
    <el-row :gutter="10" v-if="parent">
        <el-col :xs="6" :sm="3" :md="3" :lg="3" :xl="3">属性名</el-col>
        <el-col :xs="18" :sm="9" :md="9" :lg="9" :xl="9">{{parent.name}}</el-col>
        <el-col :xs="6" :sm="3" :md="3" :lg="3" :xl="3">属性编码</el-col>
        <el-col :xs="18" :sm="9" :md="9" :lg="9" :xl="9">{{parent.code}}</el-col>
    </el-row>
    <el-row :gutter="10" :align="'middel'" class="margin_top_20">
        <el-col :xs="6" :sm="3" :md="3" :lg="3" :xl="3" style="padding-top:5px">属性值:</el-col>
        <el-col :xs="18" :sm="9" :md="9" :lg="9" :xl="15">
          <el-input v-model.trim="search" placeholder="请输入属性名称或者属性值进行搜索" clearable @change="getPageDataList"></el-input>
        </el-col>
        <!-- <el-col :xs="4" :sm="9" :md="9" :lg="9" :xl="5">
          <el-button @click="getPageDataList">查询</el-button>
        </el-col> -->
    </el-row>
    <el-row :gutter="10" class="margin_top_20">
      <el-col :xs="18" :sm="21" :md="21" :lg="21" :xl="21">
            <el-table ref="multipleTableRef" stripe :data="pageData" row-key="id" :header-cell-style="tableHeaderStyle" v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="42" :reserve-selection="true"></el-table-column>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="valueName" label="属性值"></el-table-column>
                <el-table-column prop="valueNo" label="属性值编码"></el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeModal()">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Setting from '@/settings';
import { GetStoreAttrItemValueList } from '@/views/store-management/services/index';
export default {
  props: ['visible', 'parent'],
  data() {
    return {
      tableHeaderStyle: Setting.tableHeaderStyle,
      pageData: [],
      loading: false,
      multipleSelection: [],
      search: ''
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;
        this.getPageDataList();
      }
    }
  },
  methods: {
    submit() {
      const newList = this.multipleSelection.map(item => {
        return {
            id: item.id,
            name: item.valueName,
            code: item.valueNo
        }
      });
      this.$emit('selected', newList);
      this.closeModal();
    },
    getRowKeys(row) {
      return row.id // 每条数据的唯一识别值
    },
    closeModal() {
      this.search = ''
      this.$refs.multipleTableRef.clearSelection();
      this.$emit('update:visible', false);
    },
    handelSet(arr) {
    for(var i = 0; i < arr.length; i++) {
      if(arr[i] === undefined) {
        arr.splice(i,1);
        i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，                 // 这样才能真正去掉空元素,觉得这句可以删掉的连续为空试试，然后思考其中逻辑
        }
      }
      return arr
    },
    handleSelectionChange(selectlist) {
      let arr = selectlist
      this.multipleSelection = this.handelSet(arr);
    },
    getPageDataList() {
      this.loading = true;
      GetStoreAttrItemValueList({id: this.parent.id,search: this.search})
        .finally(() => (this.loading = false))
        .then(data => {
          if (data.code == 200) {
            this.pageData = data.data;
            if (this.parent.children && this.parent.children.length) {
                this.$nextTick(() => {
                this.parent.children.forEach(item => {
                        const finder = this.pageData.find(page => page.id == item.id);
                         if(finder){
                                this.$refs.multipleTableRef.toggleRowSelection(finder, true);
                         }
                    });
                })
            }
            
          } else {
            this.pageData = [];
          }
        })
        .catch(error => {
          this.pageData = [];
        })
    }
  }
}
</script>
